<%@ page  contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="p" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<meta charset="UTF-8">
<%@ include file="/common/taglibs.jsp" %>	
<title>权限管理</title>
</head>
<body>
	<script>
		$(function(){
			//加载easyui-tree数据
			$.ajax({
				 url:'${ctx }/SysRole/loadRoleTree',  
			     dataType : 'json',
			     cache:false,
				 success:function(datas) {
					$("#loadingTree").css("display", "none");
					//点击树节点,获取其详细信息
					$("#roleTree").tree({
						data:datas,
						onClick:function(node){
							//单击事件  
							$("#roleSelected").val(node.id);
							selectedOther(node.id);
					    }
					});
				 }
			});
			$.ajax({
				type:"get",
				 url:'${ctx }/SysMenuLink/loadMenu',  
			     dataType : 'json',
			     cache:false,
				 success:function(datas) {
					//点击树节点,获取其详细信息
					$("#tg").treegrid({
						data:datas
					}); 
					$(".datagrid-htable td:eq(3)").html('<div style="height:auto;" class="datagrid-cell datagrid-cell-c2-readAndWrite">读<input id="selectAllRead" onclick="selectAll(1);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>写<input id="selectAllWrite" onclick="selectAll(2);" type="checkbox" style="vertical-align: middle;margin: 0 3px;"></div>');
					//$(".datagrid-cell-c1-readAndWrite").html('读<input id="selectAllRead" onclick="selectAll(1);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;写<input id="selectAllWrite" onclick="selectAll(2);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">');
					//$(".datagrid-cell-c2-readAndWrite").html('读<input id="selectAllRead" onclick="selectAll(1);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;写<input id="selectAllWrite" onclick="selectAll(2);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">');
				 }
			});
		});
	</script>
	<div class="easyui-layout" data-options="fit:true" style="width: 100%;">
		<!-- 菜单列表-->
		<div title="   角色列表" iconCls='${icon}'
			data-options="region:'west',split:false"
			style="width: 20%; padding: 5px">
			<div id="loadingTree" style="display:block;">正在加载...</div>
			<ul id="roleTree" class="easyui-tree"></ul>
			<input type="hidden" id="roleSelected"/>
		</div>
		<div title="   权限管理" iconCls='${icon}'
			data-options="region:'center'">
			<div id="tb" style="padding: 10px; height: 20px;">
				<form id="sform" method="post">
					<div style="float: right">
						<%-- <s:if test="#request.pageRight.read==1">
					角色： <select id="roleInfo" onchange="selectedOther()">
								<option value="">--请选择--</option>
								<c:forEach items="${roleList}" var="role">
									<option value="${role.id}">${role.name}</option>
								</c:forEach>
							</select>
						</s:if> --%>
						<a href="#" class="easyui-linkbutton" iconCls="icon-save"
							plain="true" onclick="roleSave()">保存</a>
					</div>
				</form>
			</div>
			<table id="tg" class="easyui-treegrid" style="width: 100%; height: 100%; padding: 0px;"
				data-options="
				rownumbers: true,
				animate: true,
				collapsible: false,
				fitColumns: true,
				selectOnCheck: false,
				checkOnSelect: false,
                toolbar:'#tb',
				method: 'get',
				idField: 'id',
				treeField: 'names'
			">
				<thead>
					<tr>
						<th data-options="field:'id'" hidden=true>id</th>
						<th data-options="field:'names'" width="20%">菜单</th>
						<th data-options="field:'readAndWrite'" width="40%"></th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</body>
<script>
	$(function(){
		//$(".datagrid-htable td:eq(3)").html('读<input id="selectAllRead" onclick="selectAll(1);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;写<input id="selectAllWrite" onclick="selectAll(2);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">');
		//$(".datagrid-cell-c1-readAndWrite").html('读<input id="selectAllRead" onclick="selectAll(1);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;写<input id="selectAllWrite" onclick="selectAll(2);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">');
		//$(".datagrid-cell-c2-readAndWrite").html('读<input id="selectAllRead" onclick="selectAll(1);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;写<input id="selectAllWrite" onclick="selectAll(2);" type="checkbox" style="vertical-align: middle;margin: 0 3px;">');
	});
	//保存按钮
	function roleSave() {
		//var rid = document.getElementById("roleInfo").value;
		var rid = $("#roleSelected").val();
		if (rid != "") {
			var ids = "";
			$('input[type="checkbox"]:checked').each(function(){
				if(this.value != 'on')//全选的checkbox的value值不要
					ids = ids + this.value + ",";
			});
			$.ajax({
				type : 'POST',
				url : "${ctx}/SysMenuLink/save",
				data : {
					"ids" : ids,
					"rid" : rid
				},
				dataType : "json",
				cache : false,
				success : function(data) {
					showMsg('提示', data.message);
				},
				error : function(data) {
					showMsg('提示', data.message);
				}
			});
		} else
			showMsg('提示', '请选择角色！');
	}
	function selectedOther(id) {
		$(":checkbox").attr("checked", false);//清空所有的复选框
		//var id = document.getElementById("roleInfo").value;
		if (id != "") {
			$.ajax({
				type : 'POST',
				url : "${ctx }/SysMenuLink/selectedByRoleId",
				data : {
					"rid" : id
				},
				dataType : "json",
				cache : false,
				success : successInfor
			});
		}
	}
	function successInfor(json) {
		var str = json.message;
		var arr = str.split(",");
		for ( var i = 0; i < arr.length - 1; i++) {
			$(":checkbox").each(function() {
				if (this.value == arr[i]) {
					this.checked = true;
				}
			});
		} 
	}
	function selectAll(value){
		if(value == 2){
			if($("#selectAllWrite").attr("lang")!="checked"){
				$("#selectAllWrite").attr("checked",true);
				$("#selectAllWrite").attr("lang","checked");
				$('input[name="w"]').each(function(){
					this.checked = true;
				});
			}else{
				$("#selectAllWrite").attr("lang",null);
				$("#selectAllWrite").attr("checked",false);
				$('input[name="w"]').each(function(){
					this.checked = false;
				});
			}
		}
		if(value == 1){
			if($("#selectAllRead").attr("lang")!="checked"){
				$("#selectAllRead").attr("lang","checked");
				$("#selectAllRead").attr("checked",true);
				$('input[name="r"]').each(function(){
					this.checked = true;
				});
			}else{
				$("#selectAllRead").attr("lang",null);
				$("#selectAllRead").attr("checked",false);
				$('input[name="r"]').each(function(){
					this.checked = false;
				});
			}
		}
	}
	function selectAllMine(type,mid){
		if(type == 0){
			if($("#r"+mid).attr("lang")!="checked"){
				$("#r"+mid).attr("checked",true);
				$("#r"+mid).attr("lang","checked");
				$('input[id="rr'+mid+'"]').each(function(){
					this.checked = true;
				});
			}else{
				$("#r"+mid).attr("lang",null);
				$("#r"+mid).attr("checked",false);
				$('input[id="rr'+mid+'"]').each(function(){
					this.checked = false;
				});
			}
		}
		if(type == 1){
			if($("#w"+mid).attr("lang")!="checked"){
				$("#w"+mid).attr("checked",true);
				$("#w"+mid).attr("lang","checked");
				$('input[id="ww'+mid+'"]').each(function(){
					this.checked = true;
				});
			}else{
				$("#w"+mid).attr("lang",null);
				$("#w"+mid).attr("checked",false);
				$('input[id="ww'+mid+'"]').each(function(){
					this.checked = false;
				});
			}
		}
	}
</script>
